<template>
    <el-header class="header">
        <el-row>
            <el-col :span="20">
                <table class="logo">
                    <tr>
                        <td>
                            <img src="../../assets/logo.jpg">
                        </td>
                        <td>Blog后台管理系统</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="4" align="right">
                <el-dropdown trigger="click" @command="handleCommand" style="margin-top: 20px">
                    <el-link class="user" :underline="false">
                        <table>
                            <tr>
                                <td>
                                    <img :src="avatar">
                                </td>
                                <td style="padding-bottom: 6px">{{userName}}</td>
                                <td style="padding-bottom: 6px">
                                    <el-icon class="el-icon-caret-bottom"></el-icon>
                                </td>
                            </tr>
                        </table>
                    </el-link>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="index">网站首页</el-dropdown-item>
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="password">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-header>
</template>

<script>
    import token from "../../token";
    export default {
        name: "Header",
        data() {
            return {
                userName: token.getUser().userName,
                avatar: token.getUser().avatar
            }
        },
        created() {

        },
        methods: {
            handleCommand(command) {
                if(command == 'info') {
                    this.$router.push("/info");
                }
                if(command == 'index') {
                    this.$router.push("/");
                }
                if(command == 'password') {
                    this.$router.push("/password");
                }
                if(command == 'logout') {
                    this.$store.commit('logout');
                    this.$router.push("/login");
                }
            }
        }
    }
</script>

<style scoped>
    .logo {
        height: 60px;
        color: #ffffff;
        font-size: 22px;
        font-weight: bold;
        line-height: 70px;
    }
    .logo img {
        width: 45px;
        margin-top: 4px;
    }
    .user {
        color: #ffffff !important;
        font-size: 15px;
    }
    .user img {
        width: 25px;
        height: 25px;
        border-radius: 12px;
    }
</style>